<template>
  <div class="explorer-toolbar">
    <!-- 左侧：导航按钮 -->
    <div class="explorer-toolbar__left">
      <el-button-group size="small">
        <el-button
          :disabled="!fileStore.canGoBack"
          @click="fileStore.goBack"
          icon="ArrowLeft"
          title="后退"
        />
        <el-button
          :disabled="!fileStore.canGoForward"
          @click="fileStore.goForward"
          icon="ArrowRight"
          title="前进"
        />
        <el-button
          :disabled="!fileStore.canGoUp"
          @click="fileStore.goUp"
          icon="Top"
          title="向上"
        />
      </el-button-group>

      <el-button
        @click="fileOps.refresh"
        size="small"
        icon="Refresh"
        title="刷新"
      />
    </div>

    <!-- 中间：地址栏 -->
    <div class="explorer-toolbar__center" @click="toggleAddressMode">
      <!-- 面包屑模式 -->
      <el-breadcrumb v-if="!isEditingAddress" separator="/">
        <el-breadcrumb-item
          class="breadcrumb-item"
          @click.stop="fileStore.navigateToIndex(0)"
        >
          <el-icon><HomeFilled /></el-icon>
          <span>此电脑</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-for="(part, index) in fileStore.pathParts"
          :key="index"
          class="breadcrumb-item"
          @click.stop="fileStore.navigateToIndex(index + 1)"
        >
          {{ part }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 输入框模式 -->
      <el-input
        v-else
        v-model="editingPath"
        ref="pathInput"
        size="small"
        placeholder="输入文件路径"
        @blur="exitAddressMode"
        @keyup.enter="navigateToPath"
        @keyup.esc="exitAddressMode"
        @click.stop
        class="path-input"
      />
    </div>

    <!-- 右侧：视图切换 -->
    <div class="explorer-toolbar__right">
      <!-- 视图模式切换 -->
      <el-button-group size="small">
        <el-button
          :type="fileStore.viewMode === 'list' ? 'primary' : 'default'"
          @click="fileStore.setViewMode('list')"
          icon="List"
          title="列表视图"
        />
        <el-button
          :type="fileStore.viewMode === 'grid' ? 'primary' : 'default'"
          @click="fileStore.setViewMode('grid')"
          icon="Grid"
          title="网格视图"
        />
      </el-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { HomeFilled } from "@element-plus/icons-vue";
import { useFileStore } from "../stores/fileStore";
import { useFileOperations } from "../hooks/useFileOperations";

// 如果不需要 props，可以删除这部分
// interface Props {
//   // 组件属性接口（如需要可在此添加）
// }

// const props = withDefaults(defineProps<Props>(), {
//   // 默认属性值（如需要可在此添加）
// });

// const emit = defineEmits<{
//   // 组件事件（如需要可在此添加）
// }>();

const fileStore = useFileStore();
const fileOps = useFileOperations();

// 地址栏编辑状态
const isEditingAddress = ref(false);
const editingPath = ref("");

const pathInput = ref();

// 切换地址栏模式
const toggleAddressMode = () => {
  isEditingAddress.value = true;
  editingPath.value = fileStore.currentPath;

  nextTick(() => {
    if (pathInput.value) {
      pathInput.value.focus();
      pathInput.value.select();
    }
  });
};

// 退出地址栏编辑模式
const exitAddressMode = () => {
  isEditingAddress.value = false;
  editingPath.value = "";
};

// 导航到输入的路径
const navigateToPath = () => {
  const path = editingPath.value.trim();
  if (path) {
    // 检查路径是否存在
    if (fileStore.fileSystem[path]) {
      fileStore.navigate(path);
      exitAddressMode();
    } else {
      ElMessage.error("路径不存在");
      // 保持编辑模式，让用户修正路径
    }
  } else {
    exitAddressMode();
  }
};
</script>

<style scoped lang="scss">
// 基础样式已迁移到 src/styles/explorer.scss
// 这里只保留Toolbar组件特有的样式

// 地址栏输入框的特殊样式
.explorer-toolbar__center {
  // 面包屑中的home图标样式
  .breadcrumb-item {
    .el-icon {
      margin-right: 4px;
      font-size: 14px;
    }

    span {
      display: inline-flex;
      align-items: center;
    }
  }

  .path-input {
    :deep(.el-input__wrapper) {
      background: transparent;
      border: none !important; // 移除边框避免变形
      border-radius: 4px;
      transition: all 0.2s ease;
      box-shadow: inset 0 0 0 1px #e4e7ed; // 使用box-shadow代替border

      &:hover {
        box-shadow: inset 0 0 0 1px #c0c4cc;
      }

      &.is-focus {
        box-shadow:
          inset 0 0 0 1px #409eff,
          0 0 0 2px rgba(64, 158, 255, 0.2);
      }
    }

    :deep(.el-input__inner) {
      font-size: 13px;
      color: #333;
      padding: 4px 8px; // 减少内边距
    }
  }
}
</style>
